//引入路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import Info from '../pages/Info'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const route = new VueRouter ({
    routes:[
        {
            name:"guanyu",
            path:'/about',
            component:About
        },
        {
            name:"zhuye",
            path:'/home',
            component:Home,
            //配置二级路由
            children:[
                {
                    name:"info",
                    path:'info',
                    component:Info,
                    children:[
                        {
                            path:'detail',
                            component:Detail
                        }
                    ]
                },
                {
                    name:"message",
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:"detail",
                            path:'detail',  //使用占位符声明来接收params参数。
                            component:Detail,
                            //路由的props的配置（三种写法）
                            //1.直接传递参数。(传递的为一个静态数据)
                            // props:{id:123,title:"hello"}
                            //2.传递params参数,将props的值配置为true，就会将传递的params参数传递给Detail组件
                            // props:true
                            //3.传递query参数，为一个回调函数，传递了一个参数为$route，可获取到query参数的数据
                            //使用该方法可以传递静态数据/params参数/query参数等数据
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})
//全局前置路由守卫 - 在初始化/每次路由切换之前就会调用回调函数。
route.beforeEach((to,from,next)=>{
    if(to.name=='info' || to.name=='message'){
        if(localStorage.getItem('name')=='苏凉'){
            next();
        }else{
            alert('不符合条件！')
        }
    }else{
        next();
    }
})

//全局后置路由守卫 - 在初始化/每次路由切换之后就会调用回调函数
route.afterEach((to,from)=>{
    document.title = to.name || "苏凉";
})

export default route;